<!--房产搜索组件缩小版-->
<template>
    <div class="property-search sidebar-property-search">
        <form onsubmit="return false">
            <div>
                <input style="height: 41px" type="text" placeholder="位置" v-model="location">
            </div>
            <div>
                <b-form-select v-model="selectCity" :options="city" clsss="mb-3">
                    <template v-slot:first>
                        <b-form-select-option :value="null" disabled>选择城市</b-form-select-option>
                    </template>
                </b-form-select>
            </div>
            <div>
                <b-form-select v-model="selectRentType" :options="rentType" clsss="mb-3">
                    <template v-slot:first>
                        <b-form-select-option :value="null" disabled>请选择</b-form-select-option>
                    </template>
                </b-form-select>
            </div>
            <div>
                <b-form-select v-model="selectPropertyType" :options="propertyType" clsss="mb-3">
                    <template v-slot:first>
                        <b-form-select-option :value="null" disabled>选择房屋类型</b-form-select-option>
                    </template>
                </b-form-select>
            </div>
            <div>
                <b-form-select v-model="selectRoomNumber" :options="numberOptions" clsss="mb-3">
                    <template v-slot:first>
                        <b-form-select-option :value="null" disabled>选择房间数</b-form-select-option>
                    </template>
                </b-form-select>
            </div>
            <div>
                <b-form-select v-model="selectBathNumber" :options="numberOptions" clsss="mb-3">
                    <template v-slot:first>
                        <b-form-select-option :value="null" disabled>选择卫生间数</b-form-select-option>
                    </template>
                </b-form-select>
            </div>
            <div></div>
            <div></div>
            <div>
                <vue-slider v-model="sliderValue"
                            tooltip="always"
                            :dotSize="20"
                            :height="15"
                            :max="100000"
                            :tooltip-formatter="'￥{value}'"
                            :dotStyle="{backgroundColor:'#004395'}"
                            :processStyle="{backgroundColor:'#004395'}"
                            :railStyle="{backgroundColor:'#f4f4f4'}"
                            :tooltipStyle="{backgroundColor:'#004395'}"/>
            </div>
            <div>
                <button @click="search" type="button">搜索</button>
            </div>
        </form>
    </div>
</template>

<script>
    import VueSlider from 'vue-slider-component'
    import 'vue-slider-component/theme/default.css'

    export default {
        components: {
            VueSlider
        },
        data() {
            return {
                location: '',
                selectCity: null,
                selectRentType: null,
                selectPropertyType: null,
                selectRoomNumber: null,
                selectBathNumber: null,
                numberOptions: [
                    {value: '1', text: '1'},
                    {value: '2', text: '2'},
                    {value: '3', text: '3'},
                    {value: '4', text: '4'},
                    {value: '5', text: '5'},
                    {value: '6', text: '6'}
                ],
                sliderValue: [12500, 75000]
            }
        },
        props: {
            searchParams: {
                type: Object,
                default() {
                    return {
                        url: '',
                        data: {}
                    }
                }
            },
            city: {
                type: Array,
                default() {
                    return [
                        {value: '北京', text: '北京'},
                        {value: '上海', text: '上海'},
                        {value: '广州', text: '广州'},
                        {value: '深圳', text: '深圳'},
                        {value: '成都', text: '成都'}
                    ]
                }
            },
            rentType: {
                type: Array,
                default() {
                    return [
                        {value: '1', text: '租房'},
                        {value: '2', text: '买房'}
                    ]
                }
            },
            propertyType: {
                type: Array,
                default() {
                    return [
                        {value: '1', text: '公寓'},
                        {value: '2', text: '咖啡馆'},
                        {value: '3', text: '住宅'},
                        {value: '4', text: '餐馆'},
                        {value: '5', text: '商店'},
                        {value: '6', text: '别墅'}
                    ]
                }
            },
        },
        methods: {
            search() {
                //构建表单数据
                let formData = new FormData();
                if (this.location) formData.append('location', this.location);
                if (this.selectCity) formData.append('city', this.selectCity);
                if (this.selectRentType) formData.append('rentType', this.selectRentType);
                if (this.selectPropertyType) formData.append('type', this.selectPropertyType);
                if (this.selectRoomNumber) formData.append('roomNumber', this.selectRoomNumber);
                if (this.selectBathNumber) formData.append('bathNumber', this.selectBathNumber);
                formData.append('priceStart', this.sliderValue[0]);
                formData.append('priceEnd', this.sliderValue[1]);
                let searchData = this.searchParams.data;
                if (searchData) {
                    for (let one in searchData) {
                        formData.append(one + '', searchData[one]);
                    }
                }
                //发送Ajax请求
                this.axios.get(this.searchParams.url, formData).then(res => {
                    //ajax接收数据回传到父组件,data为回传数据
                    this.$emit("searchResult", res.data);
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    }
</script>
